<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 单曲线样式1，没有坐标轴，平滑曲线
 * @LastEditTime: 2021-10-27 16:21:31
 * @FilePath: \tianjushi-kanban\src\components\charts\SingleLine1.vue
-->
<template>
<div :style="[{ width: width, height: height,overflow:'hidden' }]">
  <div
    ref="echartref"
    :style="[{ width: width, height: height }, _resetChartStyle]"
  ></div>
</div>
  
</template>

<script>
import * as echarts from "echarts";

import { onMounted,toRefs, ref,reactive,watch,computed } from 'vue';
import { resetChartStyle, showLoading } from "@/core/tools/common";
export default {  
  
  props: {
      title: {
      type: String,
      default: "100%",
    },
      width: {
      type: String,
      default: "100%",
    },
     height: {
      type: String,
      default: "100%",
    },
    chartdata:{
     type: Array,
      default:   [502.84, 205.97, 332.79, 281.55, 398.35, 214.02],
    },
    color: {
      type: Array,
      default: ['#1BC85E', '#00A0E9', '#fccb05', '#f5804d'],
    },
  },
  setup: function (props, context) {
     
    /*监听props*/
    watch(props, (newProps, oldProps) => {
        f_echartInit(state.chartInit)
    }); 
 
    let state = reactive({ 
      echartref: ref(),
      chartInit:""
    }) 

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle()
      } 
    }) 

    const f_echartInit = (chartdom) =>{   
         let data_chart2 = props.chartdata;
				 let	option = { 
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								lineStyle: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: 'rgba(0, 255, 233,0)'
										}, {
											offset: 0.5,
											color: 'rgba(255, 255, 255,1)',
										}, {
											offset: 1,
											color: 'rgba(0, 255, 233,0)'
										}],
										global: false
									}
								},
							},
						},
						grid: {
							top: '0',
							left: '0%',
							right: '0%',
							bottom: '15%',
							// containLabel: true
						},
						xAxis: [{
							type: 'category',
							show: false,
							axisLine: {
								show: false
							},
							splitArea: {
								// show: true,
								color: '#f00',
								lineStyle: {
									color: '#f00'
								},
							},
							axisLabel: {
								show: false,
								color: '#fff'
							},
							splitLine: {
								show: false
							},
							boundaryGap: false,
							// data: ['A', 'B', 'C', 'D', 'E', 'F'],

						}],

						yAxis: [{
							type: 'value',
							min: 0,
							// max: 140,
							splitNumber: 4,
							splitLine: {
								show: true,
								lineStyle: {
									color: 'rgba(255,255,255,0.1)'
								}
							},
							axisLine: {
								show: false,
							},
							axisLabel: {
								show: false,
								margin: 20,
								textStyle: {
									color: '#d1e6eb',

								},
							},
							axisTick: {
								show: false,
							},
						}],
						series: [{
							name: '注册总量',
							type: 'line',
							smooth: true, //是否平滑
							showAllSymbol: true,
							symbol: 'circle',
							symbolSize: 0,
							lineStyle: {
								normal: {
									color: "#00b3f4",
									shadowColor: 'rgba(0, 0, 0, .3)',
									shadowBlur: 0,
									shadowOffsetY: 5,
									shadowOffsetX: 5,
								},
							},
							label: {
								show: false,
								position: 'top',
								textStyle: {
									color: '#00b3f4',
								}
							},
							itemStyle: {
								color: "#00b3f4",
								borderColor: "#fff",
								borderWidth: 3,
								shadowColor: 'rgba(0, 0, 0, .3)',
								shadowBlur: 0,
								shadowOffsetY: 2,
								shadowOffsetX: 2,
							},
							tooltip: {
								show: false
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(0,179,244,0.3)'
									},
									{
										offset: 1,
										color: 'rgba(0,179,244,0)'
									}
									], false),
									shadowColor: 'rgba(0,179,244, 0.9)',
									shadowBlur: 20
								}
							},
							data: data_chart2
						}]
					};  
			 

      chartdom.setOption(option);
      chartdom.hideLoading(); 
    }
    //挂载
    onMounted(()=>{ 
      state.chartInit = echarts.init(state.echartref); 
      state.chartInit.showLoading(showLoading());
      f_echartInit(state.chartInit)
    }) 
    return {
      ...toRefs(state), 
      _resetChartStyle
    };  

  }, 
 
};
</script>

<style>
</style>